import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import airDrop from '@/assets/images/index/airdrop.svg'
import "./index.scss"

interface IAirDrop {}

const AirDrop: FC<IAirDrop> = () => {

    const { t } = useTranslation()

    const [ list ] = useState([
        {
            name: '0 SHUI',
            desc: 'total'
        },
        {
            name: '0 SHUI',
            desc: 'amount'
        },
        {
            name: '0 SHUI',
            desc: 'claim'
        },
    ])

    const [ data ] = useState([
        {
            phase: '1 ~ 30 DAY',
            quantity: '50 SHUI',
            airdrop : '1,000,000A SHUI',
            available: '-'
        },
        {
            phase: '31 ~ 60 DAY',
            quantity: '40 SHUI',
            airdrop : '2,000,000A SHUI',
            available: '-'
        },
        {
            phase: '61 ~ 90 DAY',
            quantity: '30 SHUI',
            airdrop : '3,000,000A SHUI',
            available: '-'
        },
        {
            phase: '91 ~ 120 DAY',
            quantity: '20 SHUI',
            airdrop : '4,000,000A SHUI',
            available: '-'
        },
        {
            phase: '121 ~ 150 DAY',
            quantity: '10 SHUI',
            airdrop : '5,000,000A SHUI',
            available: '-'
        },
        {
            phase: '151 Days Later',
            quantity: '10 SHUI',
            airdrop : '1,000,000A SHUI',
            available: '-'
        },
    ])

	return (
		<div id="air-drop">
            <div className="air-drop-title">
                Air
                <span className="air-drop-d">d</span>
                rop
            </div>
            <div className="air-num">
                <img src={airDrop} alt="" />
                <div className="air-num-box flex-between">
                    {
                        list.map((item, index) => (
                            <div className="air-num-item" key={index}>
                                <p className="name">{item.name}</p>
                                <p className="num">{t(`indexAirdrop.${item.desc}`)}</p>
                            </div>
                        ))
                    }
                </div>
            </div>
            <div className="air-content">
                <div className="air-free">450 {t('indexAirdrop.million')}</div>
                <div className="air-obtain">
                    <div className="air-step">
                        <p>{t('indexAirdrop.step1')}</p>
                        <p>{t('indexAirdrop.step2')}</p>
                        <p>{t('indexAirdrop.step3')}</p>
                        <p>{t('indexAirdrop.step4')}</p>
                        <p>{t('indexAirdrop.step5')}</p>
                    </div>
                    <div className="air-time">00:00:00</div>
                </div>
                <div className="air-table table">
                    <div className="row head">
                        <div className="cell">{t('indexAirdrop.phase')}</div>
                        <div className="cell">{t('indexAirdrop.claimed')}</div>
                        <div className="cell">{t('indexAirdrop.airdrop')}</div>
                        <div className="cell">{t('indexAirdrop.available')}</div>
                    </div>
                    {
                        data.map((item, index) => (
                            <div className="row td-content" key={index}>
                                <div className="cell">{item.phase}</div>
                                <div className="cell">{item.quantity}</div>
                                <div className="cell">{item.airdrop}</div>
                                <div className="cell">{item.available}</div>
                            </div>
                        ))
                    }
                </div>
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(AirDrop)